<template>
  <div class="statistic-container">
    <div class="statistic-card">
      <div v-for="(i, idx) in leftList" :key="idx" class="item">
        <div class="name">
          {{ i.label }}
        </div>
        <div class="num">
          <span class="count-txt">{{ i.count }}</span
          >次
        </div>
      </div>
    </div>

    <div class="statistic-number">
      <div v-for="(i, idx) in rightList" :key="idx" class="number-item">
        <div class="number-label">{{ i.label }}：</div>
        <div class="number-count">
          <CountNumber :number="i.count" />
          <span style="margin-left: 10px">{{
              i.label == "船舶总数" ? "艘" : "次"
            }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CountNumber from "../base-com/count-number/count-number";
import { warningCountStatistics } from "@/api/warnings";
import { shipMixin } from "../../mixins/mixin";

export default {
  mixins: [shipMixin],
  components: {
    CountNumber,
  },
  data() {
    return {
      leftList: [
        {
          label: "今日告警数",
          count: 0,
        },
        {
          label: "今日待处理告警",
          count: 0,
        },
        {
          label: "今日已处理告警",
          count: 0,
        },
      ],
      rightList: [
        {
          label: "船舶总数",
          count: "0",
        },
        {
          label: "告警总数",
          count: "0",
        },
        {
          label: "已处理告警",
          count: "0",
        },
        {
          label: "确警超时",
          count: "0",
        },
        {
          label: "处理超时",
          count: "0",
        },
      ],
    };
  },
  methods: {
    shipChange() {
      this.initData();
    },
    initData() {
      const searchData = {};
      searchData.shipId = this.shipId;
      warningCountStatistics(searchData).then((res) => {
        // todayProcessedWarningCount
        // 今日已处理告警数量
        // integer(int32)
        // todayUnProcessedWarningCount
        // 今日待处理告警数量
        // integer(int32)
        // todayWarningCount
        // 今日告警数
        // integer(int32)
        // totalProcessedTimeoutCount
        // 处理超时总数
        // integer(int32)
        // totalProcessedWarningCount
        // 已处理告警总数
        // integer(int32)
        // totalWarningCount
        // 告警总数
        // integer(int32)
        // totalWarningTimeoutCount
        // 确警超时总数
        const result = res.result || {};
        this.leftList[0].count = result.todayWarningCount;
        this.leftList[1].count = result.todayUnProcessedWarningCount;
        this.leftList[2].count = result.todayProcessedWarningCount;

        this.rightList[0].count = result.shipNum;
        this.rightList[1].count = result.totalWarningCount;
        this.rightList[2].count = result.totalProcessedWarningCount;
        this.rightList[3].count = result.totalWarningTimeoutCount;
        this.rightList[4].count = result.totalProcessedTimeoutCount;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.statistic-container {
  pointer-events: none; // 解决遮挡地图交互问题
  position: absolute;
  bottom: 0;
  width: 100%;
  .statistic-card {
    position: absolute;
    left: 30px;
    bottom: 20px;
    .item {
      width: 377px;
      height: 68px;
      display: flex;
      align-items: center;
      background-size: contain;
      background-image: url("./images/bg.png");
      background-repeat: no-repeat;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      line-height: 28px;
      margin-bottom: 20px;
      justify-content: space-around;
      &:last-child {
        margin-bottom: 0;
      }
      > div {
        width: 50%;
        &.name {
          padding-left: 35px;
        }
        &.num {
          padding-right: 60px;
          text-align: right;
        }
      }
      .count-txt {
        color: #2dfaff;
        margin-right: 10px;
      }
    }
  }
  .statistic-number {
    position: absolute;
    right: 38px;
    bottom: 38px;
    .number-item {
      display: flex;
      align-items: center;
      font-size: 21px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #ffffff;
      margin-bottom: 20px;
      .number-label {
        width: 128px;
        text-align: right;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
    .number-count {
      display: flex;
      align-items: center;
    }
  }
}
</style>
